<template>
  <render v-bind="props"></render>
</template>
<script setup lang="ts">
import { ref, reactive, computed, inject, h } from 'vue'
import { ParagraphItem } from '../util'
import Common from '../linkCard/common.vue'
import Opus from '../linkCard/opus.vue'
type PROPS = { data: ParagraphItem }
const props = withDefaults(defineProps<PROPS>(), {})
const card = computed(() => props.data.link_card?.card)
const id = inject('id', ref(''))
const createCardTemplate = () => {
  switch (card.value?.type) {
    case 'LINK_CARD_TYPE_COMMON':
      return h(Common, { data: card.value.common!, dynId: id.value })
    case 'LINK_CARD_TYPE_OPUS':
      return h(Opus, { data: card.value.opus!, dynId: id.value })
    default:
      return h('div')
  }
}
const render = (props: PROPS) => {
  return h('div', { class: 'opus-para-link-card', directives: [] }, [
    createCardTemplate(),
  ])
}
</script>
<style lang="scss" scoped>
.opus-para-link-card {
  margin-top: 20px;
}
</style>
